<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>搜索</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.card{
				/* margin: 0; */
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: medium;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
			}
			/* 用户 */
			.user-name{
				font-size :0.6rem;
				color:gray;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
			
			
			/* 卡片主内容左右边距 */
			.my-data{
				padding-right: 7rem;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
			<!-- 标题栏 -->
			<header class="bar bar-nav" style="background-color: yellow;">
				<div class="searchbar row">
					<a class="button button-link col-10" href="market-index.html" style="margin-left: 0rem;">
						<span class="icon icon-left"></span>
					</a>
				    <div class="search-input col-70" style="margin-left: 2.5rem;">
						<label class="icon icon-search" for="search"></label>
				      <input type="search" id='search' placeholder='搜索宝贝'/>
				    </div>
				    <a id="click" class="button button-fill button-primary col-15 " style="margin-left: 1.25rem;">
						<span class="icon icon-search"></span>
					</a>
				</div>
			</header>
			
			<!-- 页面内容 -->
			<div class="content">
				<!-- 主内容 -->
				<div class="list-block add">
					
				</div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<!-- 初始化加载商品所有留言 -->
		<script type="text/javascript" >
			var search = "";
			//点击搜索按键获取框内数据
			$("#click").click(function() {
				search = $("#search").val();
				//判断url地址
				var url;
				if (search == "") {
					url = serviceIP+"/market/initcommodities";
				} else {
					url = serviceIP+"/market/searchcommodities";
				}
				$.ajax({
					type: 'get',
					url: url,
					dataType: 'json',
						data:{
							search:search
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						if(data.code==200){
							$('.add').empty();
							$(data.data).each(function() {
								var html= '<div class="list-block media-list">'+
											'<ul><li>'+
											'<a href="market-commodity.html?commodityid='+this.id+'" class="item-link item-content">'+
											'<div class="item-media">'+
											'<img src="'+this.picture+'" style="width: 5rem;">'+
											'</div>'+
											'<div class="item-inner">'+
											'<div class="item-title-row">'+
											'<div class="item-title">'+
											'<span class="commodity-title">'+
											this.title+'<br/>'+
											'</span></div></div>'+
											'<div class="item-subtitle" style="padding-top:10px">'+
											'<span class="commodity-price">'+
											'￥'+this.price+'</span></div>'+
											'<div class="item-text" style="padding-top:12px">'+
											'<span class="user-picture">'+
											'<img src="'+this.user.photo+'" width="20">'+
											'</span>'+
											'<span class="user-name">'+this.user.nickname+'</span>'+
											'</div></div></a></li></ul></div>';
								$('.add').append(html);
								//alert(this.title);
							});
						}
						else{
							alert(data.msg);
						}
					}
				});
			});
		</script>
		
		<script>
			$.init();
		</script>
	</body>
</html>
